import { memo, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { AnimatePresence, motion } from 'framer-motion';
import { FireTwoTone } from '@ant-design/icons';
import type { HotArticle } from '@/types';

export const HotTop = memo((articles: HotArticle) => {
  const navigate = useNavigate();
  const tabs = [
    { label: '综合热榜', data: articles.compreHotList },
    { label: '教程热榜', data: articles.techHotList },
  ]
  useEffect(() => {
    setSelectedTab(tabs[0]);
  }, [articles]);
  const [selectedTab, setSelectedTab] = useState(tabs[0]);

  return (
    <div className='bg-white rounded-xl shadow-sm p-6'>
      <nav>
        <ul className='flex items-center gap-2'>
          {tabs.map((item) => (
            <motion.li
              key={item.label}
              initial={false}
              animate={{
                backgroundColor:
                  item.label === selectedTab.label ? "#eee0" : "#eee0",
                color:
                  item.label === selectedTab.label ? "#fff" : "#666",
                scale: item.label === selectedTab.label ? 1.1 : 1,
              }}
              className={`${item.label === selectedTab.label ? 'bg-gradient-to-tl from-yellow-400 to-red-600' : ''} flex items-center gap-2 cursor-pointer px-2 py-1 rounded-md select-none`}
              style={{
                fontFamily: 'hotTop'
              }}
              onClick={() => {
                setSelectedTab(item)
              }}
            >
              {`${item.label}`}
            </motion.li>
          ))}
        </ul>
      </nav>
      <main className="space-y-4 mt-4">
        <AnimatePresence mode='wait'>
          <motion.div
            key={selectedTab ? selectedTab.label : "empty"}
          >
            {selectedTab.data.map((article, index) => (
              <article
                key={article.id}
                onClick={() => {
                  navigate(`/article/${article.id}`);
                }}
                className="group hover:bg-gray-50 rounded-lg p-4 hover:shadow-md transition-all duration-300 hover:-translate-y-0.5"
              >
                <motion.div
                  initial={{ x: 10, y: 10, scale: 0.8, opacity: 0 }}
                  animate={{ x: 0, y: 0, scale: 1, opacity: 1 }}
                  exit={{ x: -10, y: -10, scale: 0.9, opacity: 0 }}
                  transition={{ duration: 0.15 * index }}
                  className="flex items-start gap-4"
                >
                  <div className={`text-sm flex-shrink-0 w-6 h-6 flex items-center justify-center rounded-lg font-bold ${index === 0
                    ? 'bg-gradient-to-br from-yellow-400 to-yellow-600 text-white shadow-lg'
                    : index === 1
                      ? 'bg-gradient-to-br from-gray-300 to-gray-500 text-white shadow-md'
                      : index === 2
                        ? 'bg-gradient-to-br from-amber-600 to-amber-800 text-white shadow-sm'
                        : 'bg-gray-100 from-gray-200 to-gray-300 text-gray-600 shadow-sm'
                    }`}>
                    {index + 1}
                  </div>
                  <div className="flex-1 min-w-0">
                    <h3 title={article.title} className="text-sm font-semibold mb-2 group-hover:text-blue-600 transition-colors line-clamp-2">
                      {article.title}
                    </h3>
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <img
                          src={article.author.avatar}
                          alt={article.author.username}
                          className="w-5 h-5 rounded-full"
                        />
                        <span className="text-sm text-gray-600">{article.author.username}</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <span className="text-sm text-gray-500">{article.views} 阅读</span>
                        <FireTwoTone twoToneColor="#e53f32" />
                      </div>
                    </div>
                  </div>
                </motion.div>
              </article>
            ))}
          </motion.div>
        </AnimatePresence>
      </main>
    </div>
  );
});

HotTop.displayName = 'HotTop';